<template>
  <div id="main-exhibition">
    <exhibition>
      <span slot="exhibition-left">硬件：</span>
      <span slot="exhibition-right">
        <ul>
           <li v-for="(item,index) in hardware" :class="{active:currentIndex1===index}" @click="onclick1(index)"><exhibition-item>{{item}}</exhibition-item></li>
        </ul>
      </span>
    </exhibition>
    <exhibition>
      <span slot="exhibition-left">模型：</span>
      <span slot="exhibition-right">
        <ul>
           <li v-for="(item,index) in model" :class="{active:currentIndex2===index}" @click="onclick2(index)"><exhibition-item>{{item}}</exhibition-item></li>
        </ul>
      </span>
    </exhibition>
    <exhibition>
      <span slot="exhibition-left">场景：</span>
      <span slot="exhibition-right">
        <ul>
           <li v-for="(item,index) in scene" :class="{active:currentIndex3===index}" @click="onclick3(index)"><exhibition-item>{{item}}</exhibition-item></li>
        </ul>
      </span>
    </exhibition>
    <exhibition>
      <span slot="exhibition-left">店铺：</span>
      <span slot="exhibition-right">
        <ul>
          <li v-for="(item,index) in shop" :class="{active:currentIndex4===index}" @click="onclick4(index)"><exhibition-item>{{item}}</exhibition-item></li>
        </ul>
      </span>
    </exhibition>
  </div>
</template>
<script>
import Exhibition from '../../common/exhibition/Exhibition.vue'
import ExhibitionItem from '../../common/exhibition/ExhibitionItem.vue'
export default {
  name:'MainExhibition',
  data(){
    return {
      currentIndex1:-1,
      currentIndex2:-1,
      currentIndex3:-1,
      currentIndex4:-1
    }
  },
  props:{
     hardware:[],
     model:[],
     scene:[],
     shop:[]
  },
  components:{
    Exhibition,
    ExhibitionItem
  },
  methods:{
    onclick1(index){
      this.currentIndex1=index;
    },
    onclick2(index){
      this.currentIndex2=index;
    },
    onclick3(index){
      this.currentIndex3=index;
    },
    onclick4(index){
      this.currentIndex4=index;
    }
  }
}
</script>
<style>
#main-exhibition{
  background-color: #fff;
  width: 63.75rem;
  margin: 2% auto;
  padding: 15px 0 0 25px;
  border-radius: 30px;
}
#main-exhibition ul{
  display: flex;
}
#main-exhibition ul li{
  font-size: 14px;
  margin: 0 12px;
  padding: 3px;
  border-radius: 8px;
  cursor: pointer;
}
#main-exhibition .active,
#main-exhibition ul li:hover,
#main-exhibition ul li:active{
  background-color: #8c30f5;
  color: #fff;
}
</style>